<template>
	<view class="page-body">
		<view class="uni-padding-wrap uni-common-mt">
			<movable-area scale-area>
				<movable-view 
					direction="all" 
					out-of-bounds 
					:scale="scale" 
					class="full-screen" 
					@tap="onDoubleTap">
					<image
						src="https://gd-hbimg.huaban.com/8d42a1d8d92c351d82858938a8db78f0b1011d491ab7a3-FJfcyl_fw1200webp"
						class="full-screen">
					</image>
				</movable-view>
			</movable-area>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale: 1,           // 初始缩放比例
				old: {
					scale: 1        // 保存原始比例
				},
				lastTapTime: 0      // 上一次点击的时间戳
			}
		},
		methods: {
			onDoubleTap() {
				const currentTime = new Date().getTime();
				const timeDifference = currentTime - this.lastTapTime;

				// 如果两次点击间隔小于 300ms，判定为双击
				if (timeDifference < 300) {
					this.toggleScale();
				}
				this.lastTapTime = currentTime;
			},
			toggleScale() {
				// 在原始比例和3倍放大之间切换
				this.scale = this.scale === 3 ? 1 : 3;
			}
		}
	}
</script>

<style>
	/* 使图片铺满屏幕 */
	.full-screen {
		width: 100vw;
		height: 100vh;
		object-fit: cover;  /* 保持图片比例 */
	}
	
	movable-area {
		width: 100vw;
		height: 100vh;
		background-color: #D8D8D8;
		overflow: hidden;
	}
</style>
